<template>
  <div class="time-of">
    <tittle-one>时间提醒</tittle-one>
    <div>(点击对应标题可以重置Cookie)
      <el-button size="mini" @click="ZkorSs">展开/收起</el-button>
    </div>
    <el-collapse v-model="act">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="tx-tittle">
            <div>树脂提醒</div>
            <div class="aft">
              <i class="el-icon-moon"></i>
              <div>{{Math.floor(curszs)}}</div>
              <i class="dng el-icon-warning-outline" v-if="Math.floor(curszs)>=140"></i>
            </div>
          </div>
        </template>
        <div v-if="flagsz">
          <tittle-two color="green" @click.native="reSet(['树脂数','树脂下线时间'])">树脂提醒</tittle-two>
          <div style="width: 100%">下线树脂数：{{ szs }}</div>
          <div style="width: 100%">下线时间：{{ dateFormat(new Date(xxsj), dafmt) }}</div>
          <div class="cur">
            {{ Math.floor(curszs) }}<span v-if="riskshow">→{{ Math.floor(aftszs) }}</span>
          </div>
          <div>{{ `${Math.floor(curmin / 60)}分${Math.floor(curmin % 60)}秒` }} 后补充</div>
          <div v-if="show1">
            <div>距离<strong>{{ pshow.toszs }}</strong>树脂：<strong>{{ getTime(pshow.totime, 'DD天 hh:mm:ss') }}</strong>
            </div>
            <div>推荐上线时间：<strong>{{ dateFormat(pshow.toline, tofmt) }}</strong></div>
            <el-row class="stage">
              <el-input class="inbox" v-model="inszs" type="text"></el-input>
              <el-button type="info" icon="el-icon-check" circle @click="querySz(inszs)"></el-button>
              <el-button type="success" v-if="chkShow(40)" circle @click="querySz(40)">40</el-button>
              <el-button type="primary" v-if="chkShow(80)" circle @click="querySz(80)">80</el-button>
              <el-button type="warning" v-if="chkShow(120)" class="thre" circle @click="querySz(120)">120</el-button>
              <el-button type="danger" v-if="chkShow(160)" class="thre" circle @click="querySz(160)">160</el-button>
            </el-row>
          </div>
          <div v-else>
            满了！请重置~
          </div>
          <div v-if="show">
            <el-button type="success"
                       @click="updateEnd">更新下线
            </el-button>
          </div>
        </div>
        <div v-else>
          <div style="width: 100%">请先设置 <i>树脂数</i>(数字) 和 <i>下线时间</i>(日期时间格式) 的cookie</div>
          <div class="setting">
            <div> 树脂数：
              <el-input v-model="szs" style="max-width: 30%"></el-input>
            </div>
            <div>下线时间：
              <el-date-picker
                v-model="xxsj"
                type="datetime"
                style="max-width: 70%"
              ></el-date-picker>
            </div>
            <div style="text-align: center">
              <el-button type="success" @click="setSz">设置</el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item title="家园提醒" name="2">
        <template slot="title">
          <div class="tx-tittle">
            <div>家园提醒</div>
            <div class="aft">
              <i class="el-icon-coin"></i>
              <div>{{Math.floor(curbq)}}</div>
              <i class="el-icon-present"></i>
              <div>{{Math.floor(curhg)}}</div>
              <i class="dng el-icon-warning-outline"
                 v-if="Math.floor(curbq)>=Math.floor(bqmx*0.9) || Math.floor(curhg)>=Math.floor(hgmx*0.85)"></i>
            </div>
          </div>
        </template>
        <el-collapse v-model="act1">
          <div v-if="flagbqhg">家园等级：{{ jydj }} 家园仙力：{{ jyxl }}</div>
          <div v-if="flagjy.jybhg && flagbqhg">
            <div>壶灵下线时间：{{ dateFormat(new Date(xxsjjy[0]), dafmt) }}</div>
            <el-collapse-item title="家园币提醒" name="1">
              <tittle-two color="gold" @click.native="reSet(['家园等级', '家园仙力','壶灵下线时间'])">家园币提醒</tittle-two>
              <div v-if="flagbqhg">
                <div>宝钱上限<strong>{{ bqmx }}</strong>，产量速度：<strong>{{ bqsd }}个/小时</strong></div>
                <div class="cur"> {{ Math.floor(curbq) }}</div>
                <div>{{ `${Math.floor(curbqt / 60)}分${Math.floor(curbqt % 60)}秒` }} 后补充</div>
                <div>预计到期时间：<strong>{{ dateFormat(toline2[0], tofmt) }}</strong></div>
              </div>
              <div v-else>先设置 <i>壶灵下线时间</i>(日期时间格式)的Cookie</div>
            </el-collapse-item>
            <el-collapse-item title="好感馈赠提醒" name="2">
              <tittle-two color="purple" @click.native="reSet(['壶灵下线时间'])">好感馈赠提醒</tittle-two>
              <div v-if="flagbqhg">
                <div>好感度上限<strong>{{ hgmx }}</strong>,产量速度：<strong>{{ hgsd }}点/小时</strong></div>
                <div class="cur"> {{ Math.floor(curhg) }}</div>
                <div>{{ `${Math.floor(curhgt / 60)}分${Math.floor(curhgt % 60)}秒` }} 后补充</div>
                <div>预计到期时间：<strong>{{ dateFormat(toline2[1], tofmt) }}</strong></div>
              </div>
              <div v-else>先设置 <i>壶灵下线时间</i>(日期时间格式)的Cookie</div>
            </el-collapse-item>
          </div>
          <div v-else>
            <div style="width: 100%">请先设置家园信息 <i>家园等级</i>(数字) 和 <i>仙力</i>(数字) 的cookie</div>
            <div class="setting">
              <div v-if="!flagbqhg">
                <div> 家园等级：
                  <el-input v-model="jydj" style="max-width: 30%"></el-input>
                </div>
                <div> 家园仙力：
                  <el-input v-model="jyxl" style="max-width: 30%"></el-input>
                </div>
                <div style="text-align: center">
                  <el-button type="success" @click="setJyxx">设置</el-button>
                </div>
              </div>
              <div v-if="!flagjy.jybhg">
                壶灵下线时间：
                <el-date-picker
                  v-model="xxsjjy[0]"
                  type="datetime"
                  style="max-width: 60%"
                ></el-date-picker>
                <div style="text-align: center">
                  <el-button type="success" @click="setJyhl">设置</el-button>
                </div>
              </div>
            </div>
          </div>
          <el-collapse-item title="家园种植" name="3" v-if="flagjy.zz">
            <tittle-two color="green" @click.native="reSet(['种植下线时间'])">家园种植提醒</tittle-two>
            <div>
              <div>种植下线时间：{{ dateFormat(new Date(xxsjjy[1]), dafmt) }}</div>
              <div>预计到期时间：<strong>{{ dateFormat(toline2[2], tofmt) }}</strong></div>
            </div>
          </el-collapse-item>
          <div v-else>
            设置种植下线时间
            <div class="setting">
              <div>种植下线时间：
                <el-date-picker
                  v-model="xxsjjy[1]"
                  type="datetime"
                  style="max-width: 60%"
                ></el-date-picker>
              </div>
              <div style="text-align: center">
                <el-button type="success" @click="setJysj">设置</el-button>
              </div>
            </div>
          </div>

        </el-collapse>
      </el-collapse-item>

      <el-collapse-item title="探索派遣" name="3">
        <div v-if="flagts">
          <tittle-two color="purple" @click.native="reSet(['加成角色','探索下线时间'])">探索提醒</tittle-two>
          <div style="width: 100%">有无加成角色：{{ tsjc ? '有' : '无' }}</div>
          <div style="width: 100%">下线时间：{{ dateFormat(new Date(xxsjts), dafmt) }}</div>
          <div v-if="tsjc">加成角色完成时间：<strong>{{ dateFormat(toline1[0], tofmt) }}</strong></div>
          <div>普通角色完成时间：<strong>{{ dateFormat(toline1[1], tofmt) }}</strong></div>
        </div>
        <div v-else>
          <div style="width: 100%">请先设置 <i>是否有加成角色</i>(bool) 和 <br><i>下线时间</i>(日期时间格式) 的cookie</div>
          <div class="setting">
            <div style="display: flex;justify-content: flex-start">
              <div> 加成角色(-25%)：</div>
              <el-switch v-model="tsjc" active-text="有" inactive-text="无"></el-switch>
            </div>
            <div>下线时间：
              <el-date-picker
                v-model="xxsjts"
                type="datetime"
                style="max-width: 70%"
              ></el-date-picker>
            </div>
            <div style="text-align: center">
              <el-button type="success" @click="setTs">设置</el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item title="参量质变仪" name="4">
        <div v-if="flagzby">
          <tittle-two color="green" @click.native="reSet(['质变仪下线时间'])">参量质变仪提醒</tittle-two>
          <div style="width: 100%">下线时间：{{ dateFormat(new Date(xxsjzby), dafmt) }}</div>
          <div>预计可使用时间：<strong>{{ dateFormat(tolinezby, tofmt) }}</strong></div>
        </div>
        <div v-else>
          <div style="width: 100%">请先设置<i>下线时间</i>(日期时间格式) 的cookie</div>
          <div class="setting">
            <div style="display: flex;justify-content: flex-start">
              <div style="width: 100%;max-width: 100px">剩余天数：</div>
              <el-input v-model="syts"></el-input>
            </div>
            <div style="display: flex;justify-content: flex-start">
              <div style="width: 100%;max-width: 100px">或者下线时间：</div>
              <el-date-picker
                v-model="xxsjzby"
                type="datetime"
                style="width:100%;"
              ></el-date-picker>
            </div>
            <div style="text-align: center">
              <el-button type="success" @click="setZby">设置</el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <div style="width: 100%;height: 100px"></div>
    </el-collapse>
  </div>
</template>

<script>
import TittleOne from '../temp/TittleOne.vue'
import TittleTwo from "../temp/TittleTwo";
import {riskSz, jyInfo} from '../../data/com'
import {getTime, dateFormat} from '../../util/daelTime'
import {getCookie, setCookie, delCookie, goto} from '../../util/request'


const SZ = 8 * 60 * 1000    //1个树脂的毫秒
const MOM = 40 * SZ         //40个的毫秒
const FT = 'YYYY-MM-DD hh:mm:ss 星期ZHWK'
export default {
  name: "TimeOf",
  components: {
    TittleTwo,
    TittleOne,
  },
  data() {
    return {
      dafmt: FT,
      tofmt: 'MM-DD hh:mm:ss',
      inszs: 100,   // 搜索的树脂
      pshow: {      // 树脂信息显示
        toszs: 160,
        totime: 0,
        toline: 0
      },
      totime: [0, 0, 0, 0, 0],  // 树脂阶段倒计时
      toline: [0, 0, 0, 0, 0],  // 树脂阶段推荐上线时间
      show: true,    // 是否设置树脂
      show1: true,   // 是否满160
      szs: 0,     //ck获取 树脂数
      xxsj: '',   //ck获取 下线时间
      curszs: 0,  // 当前树脂 (中间大字)
      riskszs: 0,
      aftszs: 0,
      riskshow: false, //是否显示树脂消耗
      curmin: 0,

      tsjc: true,   //探索加成
      xxsjts: '',
      toline1: [0, 0],

      xxsjzby: 0,   //质变仪
      syts: 7,
      tolinezby: 0,

      jydj: 10,     //家园等级
      jyxl: 20000,  //仙力
      bqmx: 2400,
      hgmx: 500,
      bqsd: 30,
      hgsd: 5,
      curbq: 0,
      curhg: 0,
      curbqt: 0,
      curhgt: 0,
      showxx: true,
      xxsjjy: ['', ''],
      toline2: [0, 0, 0],

      flagsz: false,    //树脂提醒 是否设置数据
      flagts: false,    //探索派遣
      flagbqhg: false,
      flagjy: {         //家园
        jybhg: false,
        zz: false
      },
      flagzby: false,    //质变仪
      act: ['1'],  // 外折叠
      act1: ['1', '2', '3'],      // 家园提醒折叠
      zkss: false
    }
  },
  methods: {
    dateFormat,
    getTime,
    ZkorSs() {
      if (this.zkss) {
        this.act = []
        this.act1 = []
      } else {
        this.act = ['1', '2', '3', '4']
        this.act1 = ['1', '2', '3']
      }
      this.zkss = !this.zkss
    },
    //刷新
    flsh() {
      this.$message.success('成功, 即将刷新~')
      setTimeout(() => {
        window.location.reload()
      }, 1000)
    },
    // 首先 设置树脂
    setSz() {
      let tmp = ''
      if (!this.szs) {
        tmp = '0'
      } else tmp = Number(this.szs).toFixed(1)
      console.log(Number(this.szs), this.xxsj.valueOf());
      setCookie('树脂数', tmp)
      setCookie('树脂下线时间', this.xxsj.valueOf())
      this.flsh()
    },
    //设置 探索
    setTs() {
      setCookie('加成角色', this.tsjc ? '1' : '0')
      setCookie('探索下线时间', this.xxsjts.valueOf())
      this.flsh()
    },
    setZby() {
      let tmp = this.xxsjzby.valueOf()
      let syts = Number(this.syts)
      if(syts>0 && syts<=7) {
        if(syts===7) {
          tmp = new Date().valueOf()
        }
        else {
          tmp = (7 - syts) * 24 * 3600 * 1000
          tmp = new Date().valueOf() - tmp
        }
      }
      setCookie('质变仪下线时间', tmp)
      this.flsh()
    },
    setJyhl() {
      setCookie('壶灵下线时间', this.xxsjjy[0].valueOf())
      this.$message.success('壶灵下线时间设置成功~')
      this.flsh()
    },
    setJyxx() {
      setCookie('家园等级', this.jydj)
      setCookie('家园仙力', this.jyxl)
      this.$message.success('家园信息设置成功~')
      this.flsh()
    },
    setJysj() {
      setCookie('种植下线时间', this.xxsjjy[1].valueOf())
      this.$message.success('种植下线时间设置成功~')
      this.flsh()
    },
    // 生成当前树脂
    chkSz(t1, t2) {
      this.curszs = this.szs + Number(((t2 - t1) / SZ).toFixed(1))
      this.curszs = Number(this.curszs)
      let risk = getCookie('risk')
      if (risk) {
        this.riskshow = true
        this.aftszs = this.curszs
        risk = JSON.parse(risk)
        let riskszs = riskSz(risk)
        console.log(risk);
        console.log(riskszs);
        if (this.curszs >= riskszs) {
          this.aftszs = this.curszs - riskszs
          this.riskszs = riskszs
        } else {
          this.riskshow = false
        }
      }
      if (this.curszs >= 160) {
        this.curszs = 160
        this.show1 = false
        return
      }
      this.querySz(160)
    },
    chkJy() {
      const mx = jyInfo.mx
      const sp = jyInfo.sp
      this.toline2[2] = this.xxsjjy[1] + (2 * 24 + 22) * 3600 * 1000
      let tmp = 0
      //上限
      for (let i = 0; i < mx.length; ++i) {
        if (mx[i].lvl === this.jydj) {
          this.bqmx = mx[i].bq
          this.hgmx = mx[i].hg
          break
        }
      }
      // 速度
      for (let i = 0; i < sp.length; ++i) {
        if (this.jyxl >= sp[i].xl) {
          this.bqsd = sp[i].bqsd
          this.hgsd = sp[i].hgsd
          break
        }
      }
      //完成时间
      this.toline2[0] = (this.bqmx / this.bqsd) * 3600 * 1000 + this.xxsjjy[0]
      this.toline2[1] = (this.hgmx / this.hgsd) * 3600 * 1000 + this.xxsjjy[0]
      this.curbq = (new Date().valueOf() - this.xxsjjy[0]) / 1000 / 3600 * this.bqsd
      this.curhg = (new Date().valueOf() - this.xxsjjy[0]) / 1000 / 3600 * this.hgsd
      //当前数量
      clearInterval(jydsq)
      clearInterval(jydsq1)
      let jydsq = setInterval(() => {
        let tnow = new Date().valueOf()
        this.curbq += this.bqsd / 3600
        this.curbqt = Math.floor((Math.ceil(this.curbq) - this.curbq) * 3600 / this.bqsd)
        if (this.curbq >= this.bqmx) {
          console.log('ok');
          this.curbq = this.bqmx
          clearInterval(jydsq)
        }
      }, 1000)
      let jydsq1 = setInterval(() => {
        let tnow = new Date().valueOf()
        this.curhg += this.hgsd / 3600
        this.curhgt = Math.floor((Math.ceil(this.curhg) - this.curhg) * 3600 / this.hgsd)
        if (this.curhg >= this.hgmx) {
          this.curhg = this.hgmx
          clearInterval(jydsq1)
        }
      }, 1000)
    },
    // 点击按钮事件
    querySz(num) {
      if (num > 160 || isNaN(num) || !num || num < this.curszs) {
        this.$message.warning('输入无效！')
        num = 160
      }
      this.pshow.toszs = num
      // 预计时间-现在时间
      this.pshow.toline = (num - this.szs) * SZ + this.xxsj
      clearInterval(szdsq)
      let szdsq = setInterval(() => {
        let tnow = new Date().valueOf()
        this.pshow.totime = this.pshow.toline - tnow
        this.curszs = this.curszs + 1000 / SZ
        this.aftszs = this.curszs - this.riskszs
        this.curmin = ((this.pshow.totime / 1000) % 3600 % (SZ / 1000)).toFixed(0)
        if (this.curszs >= 160) {
          this.curszs = 160
          clearInterval(szdsq)
        }
      }, 1000)
    },
    chkShow(num) {
      let flag = true
      if (num < this.curszs) {
        if (num % 40 === 0) {
          flag = false
        }
      }
      return flag
    },
    reSet(arr) {
      const tmp = JSON.stringify(arr)
      this.$confirm(`是否删除这些${tmp}的Cookie?`, '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        for (let i = 0; i < arr.length; ++i) {
          delCookie(arr[i])
        }
        this.flsh()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    updateEnd() {
      if (this.riskshow) {
        this.curszs = this.aftszs
        this.riskshow = false
        delCookie('risk')
      }
      this.doOk([{k: '树脂数', v: this.curszs.toFixed(1)},
        {k: '树脂下线时间', v: new Date().valueOf()}])
    },
    doOk(arr) {
      for (let i = 0; i < arr.length; ++i) {
        setCookie(arr[i].k, arr[i].v, 100)
      }
      this.flsh()
    },
    initCook() {
      // 树脂
      const szs = getCookie('树脂数')
      const xxsj = Number(getCookie('树脂下线时间'))
      if (szs !== null && xxsj) {
        this.flagsz = true
        this.szs = Number(szs)
        this.xxsj = xxsj
        let tend = new Date(this.xxsj).valueOf()
        let tnow = new Date().valueOf()
        this.chkSz(tend, tnow)
      } else {
        this.xxsj = new Date()
      }
      // 探索
      const tsjc = Number(getCookie('加成角色'))
      const xxsj1 = Number(getCookie('探索下线时间'))
      if (tsjc !== '' && xxsj1) {
        this.flagts = true
        this.tsjc = tsjc
        this.xxsjts = xxsj1
        if (tsjc) {
          this.toline1[0] = this.xxsjts + 15 * 3600 * 1000
        }
        this.toline1[1] = this.xxsjts + 20 * 3600 * 1000
      } else {
        this.xxsjts = new Date()
      }
      // 质变仪
      const xxsjzby = Number(getCookie('质变仪下线时间'))
      if (xxsjzby) {
        this.flagzby = true
        this.xxsjzby = xxsjzby
        this.tolinezby = xxsjzby + 7 * 24 * 3600 * 1000
      } else {
        this.xxsjzby = new Date()
      }
      // 家园
      const jydj = getCookie('家园等级')
      const jyxl = getCookie('家园仙力')
      const xxsjhl = Number(getCookie('壶灵下线时间'))
      const xxsjzz = Number(getCookie('种植下线时间'))
      if (xxsjhl) {
        this.flagjy.jybhg = true
        this.xxsjjy[0] = xxsjhl
      } else {
        this.flagjy.jybhg = false
        this.xxsjjy[0] = new Date()
      }
      if (xxsjzz) {
        this.flagjy.zz = true
        this.xxsjjy[1] = xxsjzz
      } else {
        this.xxsjjy[1] = new Date()
      }
      if (jydj !== null && jyxl !== null) {
        this.flagbqhg = true
        this.jydj = Number(jydj)
        this.jyxl = Number(jyxl)
        if (this.flagbqhg) {
          this.chkJy()
        }
      }
      else this.flagbqhg = false
      console.log(this.jydj, this.jyxl);
    }
  },
  created() {
    this.initCook()
  }
}
</script>
<style lang="less" scoped>
.time-of {
  .cur {
    font-size: 3rem;
    line-height: 3rem;
  }

  .stage {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin: 5px 0 !important;

    .thre {
      width: 40px;
      text-indent: -5px;
    }
  }
}
</style>

<style lang="less">
.time-of {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .tx-tittle {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .aft {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 50%;
      max-width: 800px;
      div {
        margin-right: 10px;
        color: green;
      }
      i {
        margin-right: 10px;
        color: dodgerblue;
      }
      .dng {
       color: red;
      }
    }
  }

  .setting {
    display: flex;
    flex-wrap: wrap;
    text-align: left;

    div {
      width: 100%;
      margin: 1px 0;
    }
  }

  .inbox {
    width: 40px;
    height: 40px;

    .el-input__inner {
      width: 40px;
      text-align: center;
      border-radius: 50%;
      padding: 0 !important;
    }
  }

  .el-collapse {
    width: 100%;
    max-width: 800px;

    .el-collapse-item__content {
      padding-bottom: 10px;
    }

    .el-collapse-item {
      background: pink;

      .el-collapse-item__header {
        height: 1.2rem;
        line-height: 1.2rem;
        padding-left: 10px;
        font-size: 1rem;
        margin: 2px 0;
        background: pink;
      }

      .el-collapse {
        margin-left: 10px;

        .el-collapse-item__header {
          background: #a5d4fe;
        }
      }
    }
  }
}
</style>
